<template>
  <div class="alone-outBox f14">
    <div class="custo_top">
      温馨提示：<br>
      1、会议测试：直播前2-7天，建议您做直播网络环境的测试，帮助报告人学习使用直播平台。<br>
      2、会议宣传：会议页面审核通过后开始宣传，会议前一周和当周为重点宣传时间。
    </div>
    <div class="staffinfo">
      <div class="staff-nav">
        <p>我的自助会议列表</p>
        <div class="nav_body">
          <root-item :rootData="rootData"></root-item>
          <el-button type="text" style="color: #333;margin-right: 14px;" icon="el-icon-printer"
            @click="$router.push('/selfCreate/drafts')">草稿箱</el-button>
          <el-button type="primary" @click="createVideo()">+ 创建直播</el-button>
        </div>
      </div>
    </div>
    <div class="alone-topBox mb16">
      <div class="flex flex-warp flex_bt">
        <div class="flex flex-warp" style="align-items: center">
          <div class="mb16">
            <span>会议名称：</span>
            <el-input v-model="searchObj.title" placeholder="请输入关键字" class="width200 mr16" />
          </div>
          <div class="mb16 mr16">
            <span>审核状态：</span>
            <el-select v-model="searchObj.isExamine" placeholder="请选择" class="width200" clearable>
              <el-option v-for="item in statusArr" :key="item.name" :label="item.name" :value="item.value" />
            </el-select>
          </div>
          <div class="mb16 mr16">
            <span>会议时间 ：</span>
            <el-date-picker v-model="times" value-format="yyyy-MM-dd" type="daterange" range-separator="至"
              start-placeholder="开始日期" end-placeholder="结束日期">
            </el-date-picker>
          </div>
          <div class="mb20">
            <el-button @click="React">重置</el-button>
            <el-button type="primary" @click="SearchListBt">查询</el-button>
          </div>
        </div>
      </div>
    </div>

    <div class="tableBox" style="padding-top: 8px;">
      <el-tabs v-model="searchObj.statusType" @tab-click="handleClick">
        <el-tab-pane :label="'全部（' + labeltotal + '）'" name=""></el-tab-pane>
        <el-tab-pane label="审核" name="1"></el-tab-pane>
        <el-tab-pane label="执行" name="2"></el-tab-pane>
        <el-tab-pane label="已结束" name="3"></el-tab-pane>
      </el-tabs>
    </div>
    <div class="pd16">
      <!-- 表格 -->
      <div>
        <ul class="custo_table" v-if="DataTable.length > 0">
          <li class="table_list" v-for="item in DataTable" :key="item.mid">
            <div>
              <div class="list_top">
                <div class="flex_start">
                  <div class="realitive">
                    <img :src="item.meetingImg" class="mt_img" alt="" />
                    <!-- <span class="img_tl_yt" v-if="item.adminType == 2"
                    >研讨会</span
                  >
                  <span class="img_tl_cs" v-if="item.adminType == 1"
                    >厂商会</span
                  > -->
                  </div>
                  <div>
                    <div class="list_title" @click="goXqinfo(item)">
                      <span class="title_ff" v-if="item.isCharges == 1">付费</span>
                      <span class="list_title2 sl1">{{ item.title }}</span>
                    </div>
                    <p class="time">
                      {{ item.startTime }}-{{ item.videoEndDate2 }}
                    </p>
                    <p class="col7e8" v-if="item.isExamine == 2">审核状态 驳回</p>
                    <p class="col7e8" v-if="item.isExamine == 1">审核状态 通过</p>
                    <p class="col7e8" v-if="item.isExamine == 0">
                      审核状态 审核中
                    </p>
                    <p class="col7e8" v-if="item.isExamine == 3">
                      提示：用户主动撤销会议申请，所有会议信息已清除
                    </p>
                  </div>
                </div>
                <div class="list_right">
                  <h4 @click="goInfoContent(item)">{{ item.personNum }}</h4>
                  <span>报名人数</span>
                </div>
              </div>
              <div class="lst_btm">
                <span class="btm_dzb" v-if="item.isExamine == 1 && (
                  item.status == 1 ||
                  item.status == 2 ||
                  item.status == 3 ||
                  item.status == 4 ||
                  item.status == 5)
                  ">
                  <i class="el-icon-time"></i> 待直播</span>
                <span class="btm_dzb" v-if="item.isExamine == 0 || item.isExamine == 2">
                  <i class="el-icon-time"></i> 预约中</span>
                <span class="btm_zbz" v-if="item.isExamine == 1 && item.status == 6">
                  <i class="el-icon-time"></i> 直播中</span>
                <span class="btm_end" v-if="item.status == -1">
                  <i class="el-icon-time"></i> 已失效</span>
                <span class="btm_end" v-if="item.isExamine == 1 && item.status == 7">
                  <i class="el-icon-time"></i> 已结束</span>
                <span class="btm_end" v-if="item.isExamine == 1 && item.status == 8">
                  <i class="el-icon-time"></i> 回放中</span>
                <span class="btm_end" v-if="item.isExamine == 3">
                  <i class="el-icon-time"></i> 已撤销</span>
                <div v-if="item.isExamine == 0 || item.isExamine == 2">
                  <!-- <el-button type="text" @click="shareDiaog(item)">分享会议</el-button> -->
                  <el-button type="text" @click="editMeeting(item)">修改会议详情</el-button>
                  <el-button type="text" class="col7e8" @click="cancelMeetingYY(item)">撤销会议预约</el-button>
                </div>
                <div
                  v-if="item.isExamine == 1 && (item.status == 1 || item.status == 2 || item.status == 3 || item.status == 4 || item.status == 5)">
                  <el-button type="text" @click="shareDiaog(item)">分享会议</el-button>
                  <el-button type="text" @click="editMeeting(item)">修改会议详情</el-button>
                  <el-button type="text" @click="goInfo(item, 1)">进行会议测试</el-button>
                  <el-button type="text" class="col7e8" @click="cancelMeeting(item)">取消会议直播</el-button>
                </div>
                <div v-if="item.isExamine == 1 && item.status == 6">
                  <el-button type="text" @click="shareDiaog(item)">分享会议</el-button>
                  <el-button type="text" @click="goInfo(item)">进入直播间操作</el-button>
                </div>
                <div v-if="item.status == -1">
                  <el-button type="text" @click="editMeeting(item)">重新发起预约</el-button>
                  <el-button type="text" class="col7e8" @click="deleteMeeting(item)">删除会议记录</el-button>
                </div>
                <div v-if="item.isExamine == 1 && (item.status == 7 || item.status == 8)">
                  <el-button type="text" @click="shareDiaog(item)">分享会议</el-button>
                  <el-button type="text" @click="checkMeeting(item)">查看会议数据</el-button>
                  <el-button v-if="item.isEvaled == '0'" type="text" @click="AddMeetingEvaluation(item)">服务评价</el-button>
                </div>
                <div v-if="item.isExamine == 3">
                  <el-button type="text" class="col7e8" @click="deleteMeeting(item)">删除会议记录</el-button>
                </div>

              </div>
            </div>
            <div class="left-to-right-border"></div>
            <div class="right-to-bottom-border"></div>
            <div class="bottom-to-left-border"></div>
            <div class="bottom-to-start-border"></div>
          </li>
        </ul>
        <div v-else style="text-align: center;padding: 40px 0;background: #fff;">暂无数据</div>
      </div>
      <div class="alignRight">
        <Pagination :total="total" :page="searchObj.page" :limit="searchObj.limit" @pagination="paginations" />
      </div>
      <el-dialog title="评价服务" :visible.sync="appraiseDia" width="800px" center :close-on-click-modal="false">
        <div class="pd32">
          <el-form :model="appraise" :rules="rules" ref="ruleForm">
            <el-form-item prop="question1">
              <div class="dia_list">
                <div class="dia_list_title">1.您对运营人员的总体满意度如何？ <span class="col7e8">（专业性、沟通过程、服务态度等）</span></div>
                <div>
                  <el-radio-group v-model="appraise.question1">
                    <el-radio label="非常满意">非常满意</el-radio>
                    <el-radio label="比较满意">比较满意</el-radio>
                    <el-radio label="满意">满意</el-radio>
                    <el-radio label="不太满意">不太满意</el-radio>
                    <el-radio label="非常不满意">非常不满意</el-radio>
                  </el-radio-group>
                </div>
              </div>
            </el-form-item>
            <el-form-item prop="question2">
              <div class="dia_list">
                <div class="dia_list_title">2.您对本次会议的总体满意度如何？ <span class="col7e8">（会议主题、专家级别、报告内容）</span></div>
                <div>
                  <el-radio-group v-model="appraise.question2">
                    <el-radio label="非常满意">非常满意</el-radio>
                    <el-radio label="比较满意">比较满意</el-radio>
                    <el-radio label="满意">满意</el-radio>
                    <el-radio label="不太满意">不太满意</el-radio>
                    <el-radio label="非常不满意">非常不满意</el-radio>
                  </el-radio-group>
                </div>
              </div>
            </el-form-item>
            <el-form-item prop="question3">
              <div class="dia_list">
                <div class="dia_list_title">3.您对销售人员的总体满意度如何？ <span class="col7e8">（专业性、沟通过程、服务态度等）</span></div>
                <div>
                  <el-radio-group v-model="appraise.question3">
                    <el-radio label="非常满意">非常满意</el-radio>
                    <el-radio label="比较满意">比较满意</el-radio>
                    <el-radio label="满意">满意</el-radio>
                    <el-radio label="不太满意">不太满意</el-radio>
                    <el-radio label="非常不满意">非常不满意</el-radio>
                  </el-radio-group>
                </div>
              </div>
            </el-form-item>
            <el-form-item prop="question4">
              <div class="dia_list" style="border:none">
                <div class="dia_list_title">4.您认为本次会议有哪些方面需要改进和提高？</div>
                <div>
                  <el-input type="textarea" :rows="3" placeholder="请输入内容" v-model="appraise.question4">
                  </el-input>
                </div>
              </div>
            </el-form-item>
          </el-form>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="appraiseDia = false">取消</el-button>
          <el-button type="primary" @click="saveEvaluation('ruleForm')">确定</el-button>

        </span>
      </el-dialog>
      <share-dialog ref="sharelog"></share-dialog>
    </div>
  </div>
</template>
<script>
import Pagination from "@/components/Pagination/index.vue";
import rootItem from "@/components/rootItem/index.vue";
import Cookies from "js-cookie";
import indexapi from "@/api/index";
import { changeDateFormat2 } from "@/utils/commin";
import shareDialog from '../components/shareDialog.vue'
export default {
  components: {
    Pagination,
    rootItem,
    shareDialog
  },
  data() {
    return {
      start_date: "",
      times: [],
      rootData: {
        title: "自助会议的权限",
        maded: 0,
        all: 0,
      },
      appraiseDia: false,
      appraise: {
        question1: '',
        question2: '',
        question3: '',
        question4: '',
      },
      rules: {
        question1: [
          { required: true, message: '请选择您对运营人员的总体满意度', trigger: 'change' }
        ],
        question2: [
          { required: true, message: '请选择您对本次会议的总体满意度', trigger: 'change' }
        ],
        question3: [
          { required: true, message: '请选择销售人员的总体满意度', trigger: 'change' }
        ],
        question4: [
          { required: true, message: '请输入本次会议有哪些方面需要改进和提高', trigger: 'blur' }
        ],
      },
      DataTable: [],
      datatime: [],
      searchObj: {
        adminid: this.$store.getters.imShowId,
        title: null,
        staTime: null,
        endTime: null,
        status: null,
        state: "",
        limit: 10,
        page: 1,
        isExamine: null,
      },
      total: 0,
      labeltotal: 0,
      loading: false,
      reasonDia: false,
      returnReason: "",
      statusArr: [
        { name: "待审核", value: 0 },
        { name: "审核通过", value: 1 },
        { name: "驳回", value: 2 },
        { name: "已撤销", value: 3 },
      ],
      stateArr: [
        { name: "定制研讨会", value: 2 },
        { name: "定制厂商会", value: 1 },
      ],
    };
  },
  mounted() {
    // this.getclassification();
    if (this.$route.query.mid) {
      this.searchObj.mid = this.$route.query.mid
    }
    this.SearchList();
    this.getCompanyAllServiceNum();
  },
  methods: {
    goInfoContent(item) {
      if (item.isExamine == 1) {
        if (item.status == 1 || item.status == 2 || item.status == 3 || item.status == 4 || item.status == 5) {
          this.$router.push({
            path: "/selfCreate/broadcast",
            query: { mid: item.mid, meetType: item.meetType, activeName: 'second' },
          });
        } else if (item.status == 6) {
          this.$router.push({
            path: "/selfCreate/broadcast",
            query: { mid: item.mid, index: 1, meetType: item.meetType, activeName: 'second' },
          });
        } else if (item.status == -1 || item.status == 7 || item.status == 8) {
          console.log('进入会议名单');
          this.$router.push({ path: '/selfCreate/endMeeting', query: { mid: item.mid, time: item.videoEndDate, meetType: item.meetType } })
        }
      } else {
        this.$message('审核通过才能进入会议名单！')
      }
    },
    shareDiaog(item) {
      this.$refs.sharelog.input3 = `https://www.instrument.com.cn/webinar/meeting_${item.mid}.html`
      this.$refs.sharelog.shareMeetDia = true
    },
    goXqinfo(item) {
      if (item.isExamine == 1 && (item.status == -1 || item.status == 1 || item.status == 2 || item.status == 3 || item.status == 4 || item.status == 5 || item.status == 6 || item.status == 7 || item.status == 8)) {
        window.open(`https://www.instrument.com.cn/webinar/meeting_${item.mid}.html`)
      } else {
        this.$message('未审核成功，无法进入前台页面')
      }
    },
    createVideo() {
      if (this.rootData.maded == 0) {
        this.$message({ type: 'error', message: '权限已消耗完，请联系客服！' })
      } else {
        this.$router.push('/selfCreate/step1')
      }

    },
    saveEvaluation(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.appraise.imshowid = this.$store.getters.imShowId
          indexapi.selfMeting.AddMeetingEvaluation(this.appraise).then(res => {
            this.$message({ type: 'success', message: '评价成功！' })
            this.appraiseDia = false
            this.SearchList()
          })
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    AddMeetingEvaluation(item) {
      this.appraise.mid = item.mid
      this.appraiseDia = true
    },
    checkMeeting(item) {
      this.$router.push({ path: '/selfCreate/endMeeting', query: { mid: item.mid, time: item.videoEndDate, isEvaled: item.isEvaled } })
    },
    deleteMeeting(item) {
      this.$confirm("删除记录后，将无法找回，请谨慎操作!", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          let form = {
            meetType: item.meetType,
            imshowId: this.$store.getters.imShowId,
            mid: item.mid,
          };
          indexapi.selfMeting.deleteMeeting(form).then((res) => {
            this.$message({ type: "success", message: "删除成功！" });
            this.SearchListBt();
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消",
          });
        });
    },
    cancelMeeting(item) {
      this.$confirm(
        "取消会议后，所有的会议信息将会删除，且无法恢复，请慎重操作！！！",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      )
        .then(() => {
          let form = {
            meetType: item.meetType,
            imshowId: this.$store.getters.imShowId,
            mid: item.mid,
          };
          indexapi.selfMeting.cancelMeeting(form).then((res) => {
            this.$message({ type: "success", message: "取消成功！" });
            this.SearchListBt();
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消",
          });
        });
    },
    goInfo(item, index) {
      if (index) {
        this.$router.push({
          path: "/selfCreate/broadcast",
          query: { mid: item.mid, index: index,meetType:item.meetType },
        });
      } else {
        this.$router.push({
          path: "/selfCreate/broadcast",
          query: { mid: item.mid,meetType:item.meetType },
        });
      }
    },
    cancelMeetingYY(item) {
      this.$confirm(
        "撤销后，会议的预约审核流程将会终止，请慎重操作！！！",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      )
        .then(() => {
          let form = {
            meetType: item.meetType,
            imshowId: this.$store.getters.imShowId,
            mid: item.mid,
          };
          indexapi.selfMeting.returnManufacturerMeeting(form).then((res) => {
            this.$message({ type: "success", message: "撤销成功！" });
            this.SearchListBt();
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消撤销",
          });
        });
    },
    getCompanyAllServiceNum() {
      let form = {
        imshowId: this.$store.getters.imShowId,
      };
      indexapi.common.getCompanyAllServiceNum(form).then((res) => {
        (this.rootData.all = res.data.self_meet_num),
          (this.rootData.maded =
            res.data.self_meet_num - res.data.self_meet_num_used);
      });
    },
    editMeeting(val) {
      this.$router.push({ path: "/selfCreate/step1", query: { mid: val.mid } });
    },
    handleClick(tab, event) {
      this.searchObj = {
        adminid: this.$store.getters.imShowId,
        title: null,
        staTime: null,
        endTime: null,
        status: null,
        state: null,
        limit: 10,
        page: 1,
        isExamine: null,
      };
      this.times = [];
      this.searchObj.statusType = tab.name;
      this.searchObj.limit = 10;
      this.searchObj.page = 1;
      this.SearchList();
    },
    // 重置
    React() {
      this.searchObj = {
        adminid: this.$store.getters.imShowId,
        title: null,
        staTime: null,
        endTime: null,
        status: null,
        state: null,
        limit: 10,
        page: 1,
        isExamine: null,
      };
      this.times = [];
      this.SearchList();
    },
    // 查询
    SearchListBt() {
      this.searchObj.limit = 10;
      this.searchObj.page = 1;
      this.searchObj.statusType = ''
      delete this.searchObj.mid
      this.SearchList();
    },
    SearchList() {
      this.loading = true;
      if (this.times.length > 0) {
        this.searchObj.staTime = this.times[0];
        this.searchObj.endTime = this.times[1];
      }
      indexapi.selfMeting
        .getSelfSmallMeetingList(this.searchObj)
        .then((res) => {
          this.loading = false;
          this.DataTable = res.data.records;
          this.DataTable.forEach((item) => {
            item.startTime = changeDateFormat2(item.startTime);
            item.videoEndDate2 = changeDateFormat2(item.videoEndDate);
          });
          this.total = res.data.total;
          if (this.searchObj.state == 0) {
            this.labeltotal = res.data.total;
          }
        });
    },
    // 分页
    paginations(val) {
      this.searchObj.limit = val.limit;
      this.searchObj.page = val.page;
      this.SearchList();
    },
  },
};
</script>
<style lang="scss" scoped>
::v-deep .el-tabs__nav-wrap::after {
  height: 1px !important;
}

.pd32 {
  padding: 0 16px;

  .dia_list {
    padding: 10px 0 17px;
    border-bottom: 1px solid #E5EAF0;

    .dia_list_title {
      font-size: 14px;
      font-weight: 600;
      color: #202933;
      line-height: 24px;
      margin-bottom: 10px;

      span {
        color: #7E8790;
        font-weight: 200 !important;
      }
    }
  }

  // .dia_list:last-child {
  //   border: none;
  // }
}

.custo_top {
  padding: 16px;
  background: #e7f2fe;
  border-radius: 2px 2px 2px 2px;
  border: 1px solid #0c7ff2;
  font-size: 14px;
  color: #4f5862;
  line-height: 28px;
  margin-bottom: 16px;
}

.flex_bt {
  justify-content: space-between;
}

.staffinfo {
  width: 100%;
  box-sizing: border-box;
  position: relative;
  overflow: auto;
  background-color: #ffffff;

  .staff-nav {
    padding: 12px 16px 6px;
    @include flex(row, center, space-between);
    border-bottom: 1px solid #e5eaf0;

    .nav_body {
      @include flex(row, center, flex-start);

      p {
        font-size: 14px;
        font-weight: 600;
        color: #202933;
        line-height: 16px;
      }
    }
  }
}

.custo_table {
  @include flex(row, flex-start, flex-start);
  flex-wrap: wrap;
  width: calc(100% - 32px);
  background: #fff;
  padding: 0 16px;

  .table_list {
    width: calc(50% - 42px);
    border: 1px solid #f1f4f6;
    padding: 24px 16px 0px;
    margin-right: 16px;
    margin-bottom: 16px;
    position: relative;

    .list_top {
      @include flex(row, center, space-between);

      .flex_start {
        @include flex(row, flex-start, flex-start);

        .img_tl_yt {
          font-size: 10px;
          transform: scale(0.83333);
          transform-origin: 0 0;
          font-weight: 600;
          color: #ffffff;
          display: inline-block;
          padding: 2px 6px;
          background: linear-gradient(270deg, #ff7272 0%, #f72626 100%);
          border-radius: 4px 0px 4px 0px;
          position: absolute;
          left: 0;
          top: 0;
        }

        .img_tl_cs {
          font-size: 10px;
          transform: scale(0.83333);
          transform-origin: 0 0;
          font-weight: 600;
          color: #ffffff;
          display: inline-block;
          padding: 2px 6px;
          background: linear-gradient(90deg, #ffbe31 0%, #ffe485 100%);
          border-radius: 4px 0px 4px 0px;
          position: absolute;
          left: 0;
          top: 0;
        }

        .mt_img {
          width: 117px;
          height: 66px;
          display: inline-block;
          border-radius: 4px;
          margin-right: 16px;
        }

        .list_title {
          @include flex(row, center, flex-start);
          font-size: 18px;
          color: #1a2031;
          line-height: 21px;

        }

        .list_title2 {
          display: inline-block;
          cursor: pointer;
          width: 24.48vw;
        }

        .list_title2:hover {
          color: #0c7ff2;
        }

        .title_ff {
          min-width: 25px;
          font-size: 12px;
          color: #ffffff;
          line-height: 14px;
          padding: 1px 4px;
          display: inline-block;
          background: #b9c0c7;
          border-radius: 2px 2px 2px 2px;
          margin-right: 4px;
        }

        .time {
          font-size: 14px;
          color: #7e8790;
          line-height: 16px;
          margin-top: 10px;
          margin-bottom: 12px;
        }
      }

      .list_right {
        min-width: 130px;
        text-align: center;

        h4 {
          font-size: 24px;
          font-weight: bold;
          color: #1a2031;
          line-height: 28px;
          margin-bottom: 7px;
          cursor: pointer;
        }

        h4:hover {
          color: #0c7ff2;
        }

        span {
          font-size: 14px;
          color: #7e8790;
          line-height: 16px;
        }
      }
    }

    .lst_btm {
      @include flex(row, center, space-between);
      border-top: 1px solid #e5eaf0;
      margin-top: 16px;

      .btm_dzb {
        font-size: 14px;
        color: #2aa100;
        line-height: 16px;
        padding: 4px 9px;
        background: #e5f9e9;
        border-radius: 0px 8px 0px 8px;
      }

      .btm_zbz {
        font-size: 14px;
        color: #ff7c32;
        line-height: 16px;
        padding: 4px 9px;
        background: #fff3dc;
        border-radius: 0px 8px 0px 8px;
      }

      .btm_end {
        font-size: 14px;
        color: #7e8790;
        line-height: 16px;
        padding: 4px 9px;
        background: #f3f3f3;
        border-radius: 0px 8px 0px 8px;
      }
    }
  }

  .table_list:nth-child(2n) {
    margin-right: 0;
  }

  // .table_list:hover {
  //   border: 1px solid #0c7ff2;
  // }
}

::v-deep .el-dialog__header {
  background: #f5f8fc;
  text-align: left;
  font-size: 16px;
  color: #202933;
  padding: 11px 16px;
}

::v-deep .el-dialog__body {
  padding: 25px 25px 10px !important;
}

::v-deep .el-dialog__title {
  font-size: 16px;
}

::v-deep .el-form-item__label {
  text-align: left !important;
}

:v-deep .el-form-item:last-child {
  margin-bottom: 0px;
}

.left-to-right-border {
  position: absolute;
  width: 0;
  height: 1px;
  background-color: #0c7ff2;
  top: 0;
  left: 0;
  bottom: 0;
  transition: 0.5s;
  -webkit-transition: 0.5s;
  -moz-transition: 0.5s;
  -ms-transition: 0.5s;
  -o-transition: 0.5s;
  // -webkit-box-shadow:0px -3px 5px rgb(81,221,25);
  // box-shadow:0px -3px 5px rgb(70,219,11);
}

.right-to-bottom-border {
  position: absolute;
  width: 1px;
  height: 0px;
  background-color: #0c7ff2;
  top: 0;
  right: 0;
  transition: 0.5s;
  -webkit-transition: 0.5s;
  -moz-transition: 0.5s;
  -ms-transition: 0.5s;
  -o-transition: 0.5s;
  // -webkit-box-shadow:3px 0px 5px rgb(81,248,15);
  // box-shadow:3px 0px 5px rgb(71,233,8);
}

.bottom-to-left-border {
  position: absolute;
  width: 0px;
  height: 1px;
  background-color: #0c7ff2;
  bottom: 0;
  right: 0;
  transition: 0.5s;
  -webkit-transition: 0.5s;
  -moz-transition: 0.5s;
  -ms-transition: 0.5s;
  -o-transition: 0.5s;
  // -webkit-box-shadow:0px 3px 5px rgb(80,245,14);
  // box-shadow:0px 3px 5px rgb(73,226,12);
}

.bottom-to-start-border {
  position: absolute;
  width: 1px;
  height: 0px;
  background-color: #0c7ff2;
  bottom: 0;
  left: 0;
  transition: 0.5s;
  -webkit-transition: 0.5s;
  -moz-transition: 0.5s;
  -ms-transition: 0.5s;
  -o-transition: 0.5s;
  // -webkit-box-shadow:-3px 0px 5px rgb(78,241,13);
  // box-shadow:-3px 0px 5px rgb(74,240,8);
}

.table_list:hover .left-to-right-border {
  width: 100%;
  transition: 0.5s;
  -webkit-transition: 0.5s;
  -moz-transition: 0.5s;
  -ms-transition: 0.5s;
  -o-transition: 0.5s;
}

.table_list:hover .right-to-bottom-border {
  height: 100%;
  transition: 0.5s;
  -webkit-transition: 0.5s;
  -moz-transition: 0.5s;
  -ms-transition: 0.5s;
  -o-transition: 0.5s;
}

.table_list:hover .bottom-to-left-border {
  width: 100%;
  transition: 0.5s;
  -webkit-transition: 0.5s;
  -moz-transition: 0.5s;
  -ms-transition: 0.5s;
  -o-transition: 0.5s;
}

.table_list:hover .bottom-to-start-border {
  height: 100%;
  transition: 0.5s;
  -webkit-transition: 0.5s;
  -moz-transition: 0.5s;
  -ms-transition: 0.5s;
  -o-transition: 0.5s;
}

/* 强大的分割线 */
// .table_list:hover .left-to-right-border {
// 	width:100%;
// 	-webkit-transition-duration:0.2s;
// 	transition-duration:0.2s;
// 	-webkit-transition-timing-function:linear;
// 	transition-timing-function:linear;
// 	-webkit-transition-delay:0s;
// 	transition-delay:0s;
// }
// .table_list:hover .right-to-bottom-border {
// 	height:100%;
// 	-webkit-transition-duration:0.2s;
// 	transition-duration:0.2s;
// 	-webkit-transition-timing-function:linear;
// 	transition-timing-function:linear;
// 	-webkit-transition-delay:0.2s;
// 	transition-delay:0.2s;
// }
// .table_list:hover .bottom-to-left-border {
// 	width:100%;
// 	-webkit-transition-duration:0.2s;
// 	transition-duration:0.2s;
// 	-webkit-transition-timing-function:linear;
// 	transition-timing-function:linear;
// 	-webkit-transition-delay:0.4s;
// 	transition-delay:0.4s;
// }
// .table_list:hover .bottom-to-start-border {
// 	height:100%;
// 	-webkit-transition-duration:0.2s;
// 	transition-duration:0.2s;
// 	-webkit-transition-timing-function:linear;
// 	transition-timing-function:linear;
// 	-webkit-transition-delay:0.6s;
// 	transition-delay:0.6s;
// }
::v-deep .el-form-item {
  margin-bottom: 0;
}

::v-deep .el-form-item__content {
  margin-left: 0 !important;
  line-height: 20px !important;
}

::v-deep .el-form-item__error {
  top: 73%;
  left: 3px;
}
</style>
